<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ace="http://www.icefaces.org/icefaces/components"
	xmlns:ice="http://www.icesoft.com/icefaces/component"
	template="/WEB-INF/layout/layout.xhtml">
	
	<ui:param name="operationForm" value="#{operationController.operationForm}" /> 
	<ui:param name="clientForm" value="#{operationController.clientForm}" /> 
	
	<ui:define name="title">Captura Hoja de Control</ui:define>
	<ui:define name="content">
	<ice:panelGroup>
		<h:messages for="operationForm" showDetail="false" showSummary="true" style="color:red;margin:8px;"  layout="table" />
		<ice:form id="operationForm">
			<ice:panelTabSet tabChangeListener="#{operationController.processTabChange}">
				<ice:panelTab label="Operacion">
					<ice:panelGrid columns="6">
						<ice:outputLabel value="Operación:" />
						
						<ice:inputText  size="15" disabled="true" value="#{operationForm.operation.id}">
							<f:convertNumber maxFractionDigits="0" integerOnly="true"
                                    maxIntegerDigits="8" pattern="00000000"  
                                     />
						</ice:inputText>
						<ice:outputLabel value="Escritura:" />
						<ice:inputText size="15" value="#{operationForm.operation.escritura}" />
						<ice:outputLabel value="Fecha:" />
						<ice:selectInputDate id="date" renderAsPopup="true" 
							renderMonthAsDropdown="true"
							renderYearAsDropdown="true"
							value="#{operationForm.operation.date.time}" >
							<f:convertDateTime pattern="dd/MM/yyyy"  />
						</ice:selectInputDate>
					</ice:panelGrid>
					<ice:panelGrid columns="2">
						<ice:outputLabel value="Tipo de Operación:" />
						<ice:selectOneMenu value="#{operationForm.operation.operationType}" converter="#{operationTypeConverter}" >
							<f:selectItem itemValue="-1" itemLabel="Selecciona Una Operación" />	
							<f:selectItems value="#{operationForm.operationTypes}"
								var="operType" itemValue="#{operType}" itemLabel="#{operType.description}"  /> 
						</ice:selectOneMenu>
						<ice:outputLabel value="Abogado:" />
						<ice:selectOneMenu value="#{operationForm.operation.lawyer}" converter="#{lawyerConverter}">
							<f:selectItem itemValue="-1" itemLabel="Selecciona Un Abogado" />		
							<f:selectItems value="#{operationForm.lawyers}"
								var="lawyerItm" itemValue="#{lawyerItm}" itemLabel="#{lawyerItm.name}"  /> 
						</ice:selectOneMenu>
						<ice:outputLabel value="Notario:" />
						<ice:selectOneMenu value="#{operationForm.operation.notary}" converter="#{notaryConverter}" >
							<f:selectItem itemValue="-1" itemLabel="Selecciona Un Notario" />
							<f:selectItems value="#{operationForm.notaries}"
								var="notaryItm" itemValue="#{notaryItm}" itemLabel="#{notaryItm.name}"  /> 
						</ice:selectOneMenu>
						<ice:outputLabel value="Cliente:" />
						<ice:panelGroup>
							<ice:commandButton value="Selecciona Cliente" partialSubmit="true" 
								actionListener="#{operationController.showClientDialog}" />
							</ice:panelGroup>
						<br />
						<ice:panelGroup>
							<ice:panelGroup style="font-size:10px">
								<ice:outputLabel value="Nombre:" />
								<ice:outputLabel style="padding-left: 5px"
									value="#{operationForm.operation.client.name}" /><br />
								<ice:outputLabel value="Direccion:" />
								<ice:outputLabel style="padding-left: 5px"
									value="#{operationForm.operation.client.address}" />
								<ice:outputLabel value=" " />
								<ice:panelGroup>
									<ice:outputLabel value="RFC:" />
									<ice:outputLabel value="#{operationForm.operation.client.rfc}" />
									<ice:outputLabel style="padding-left: 5px" value="Telefono:" />
									<ice:outputLabel value="#{operationForm.operation.client.phone}" />
								</ice:panelGroup>
							</ice:panelGroup>
						</ice:panelGroup>
						<ice:outputLabel value="Observaciones:" />
						<ice:inputTextarea cols="50" rows="5" value="#{operationForm.operation.comments}" />
					</ice:panelGrid>
					<ice:panelGroup style="padding-top:10px">
						<ice:commandButton value="Guardar" action="#{operationController.submitOperation}" />
					</ice:panelGroup>
				</ice:panelTab>
				<ice:panelTab label="Honorarios" >
					<ice:panelGroup>
					    <style type="text/css">
			                 .ui-datatable-odd {background-color:#F7F7F7 !important;} 
			                  .ui-datatable { 
			                  	font-size:.95em;
			                  	width:550px 
			                  }
			          		  .amount {
			          		  	text-align: right;
			          		  	width: 100%
			          		  }   
			          		  .concept {
			          		  	text-align: left;
			          		  } 
			          		  
			          		  .ui-footer-column {
			          		  	text-align: right;
			          		  }
			             </style>
						<h:form>
							<ace:dataTable id="feesTable" 
								value="#{operationForm.balances}"
								var="balance">
								<ace:columnGroup type="footer">
									<ace:row>
										<ace:column footerText="Total:" />
										<ace:column footerText="#{operationForm.totalBalance.amount}" />
										<ace:column footerText="#{operationForm.totalBalance.deposit}" />
										<ace:column footerText="#{operationForm.totalBalance.balance}" />
									</ace:row>
								</ace:columnGroup>
								
								<ace:column>
									<f:facet name="header">
										<ice:outputText value="Concepto" />
									</f:facet>
									<ice:panelGroup styleClass="concept">
										<h:outputLabel value="#{balance.concept.description}" />
									</ice:panelGroup>
								</ace:column>

								<ace:column headerText="Costo">
									<ace:cellEditor>
										<f:facet name="output">
											<h:outputText value="#{balance.amount}" />
										</f:facet>
										<f:facet name="input">
											<h:inputText  value="#{balance.amount}"    />
										</f:facet>
									</ace:cellEditor>
								</ace:column>

								<ace:column headerText="Abono">
									<ace:cellEditor>
										<f:facet name="output">
											<h:outputText value="#{balance.deposit}" />
										</f:facet>
										<f:facet name="input">
											<h:inputText  value="#{balance.deposit}"    />
										</f:facet>
									</ace:cellEditor>
								</ace:column>
								
								<ace:column headerText="Balance">
									<h:outputText size="8"  styleClass="amount" value="#{balance.balance}" />
								</ace:column>

								<ace:column id="options" headerText="Options">
									<ace:rowEditor id="editor" rowEditListener="#{operationController.updateBalanceValues}" />
								</ace:column>
								
							</ace:dataTable>
						</h:form>
					</ice:panelGroup>
				</ice:panelTab>
				<ice:panelTab label="Gastos">
				</ice:panelTab>
				<ice:panelTab label="Pagos">
				</ice:panelTab>
				<ice:panelTab label="Anticipos">
				</ice:panelTab>
			</ice:panelTabSet>
		</ice:form>
		<ace:dialog header="Clientes" widgetVar="clientDialog"
			closable="true" modal="true" draggable="true" showEffect="fade"
			hideEffect="fade" resizable="true" width="415">
			<ice:panelGroup>
				<h:messages for="clientForm" showDetail="false" showSummary="true" style="color:red;margin:8px;"  layout="table" />
				<ice:form id="clientForm">
					<h:panelGrid columns="2" width="85%" 
						style="border: 1px solid #CDCDCD;" columnClasses="labelForms, inputForms" >
						<h:outputLabel for="Id" value="Id:" />
						<h:inputText id="Id" style="text-align:right"
							value="#{clientForm.editClient.id}" disabled="true"
							size="15" maxlength="10">
							<f:validateLength minimum="1" maximum="10" />
						</h:inputText>
						<h:outputLabel for="Name" value="Nombre:" />
						<h:inputText id="Name"
							value="#{clientForm.editClient.name}" 
							size="30" maxlength="80" />
						
						<h:outputLabel for="address" value="Dirección:" />
						<h:inputText id="address" size="30" maxlength="80"  
							value="#{clientForm.editClient.address}" 
							/>
						
						<h:outputLabel for="phone" value="Teléfono:" />
						<h:inputText id="phone"
							value="#{clientForm.editClient.phone}" 
							size="10" maxlength="20" />

						<h:outputLabel for="rfc" value="RFC:" />
						<h:inputText id="rfc"
							value="#{clientForm.editClient.rfc}" 
							size="10" maxlength="20" />

						<h:outputLabel for="email" value="e-mail:" />
						<h:inputText id="email"
							value="#{clientForm.editClient.email}" 
							size="30" maxlength="80" />

				
						<h:outputLabel  value="Tipo de Cliente: " />
						<ice:selectOneRadio value="PRIV">
							<f:selectItem itemLabel="Privado" itemValue="PRIV" />
							<f:selectItem itemLabel="Corporativo" itemValue="CORP" />
						</ice:selectOneRadio>
						
						<f:facet name="footer">
							<h:panelGroup style="text-align:right;display:block">
							<h:commandButton value="Guardar"
								actionListener="#{operationController.submitClient}" />
							</h:panelGroup>
						</f:facet>
					</h:panelGrid>
				</ice:form>

				<!-- 						<ice:panelGroup style="width:100%;"> -->
				<!-- 							<ice:outputLabel value="Client Name:" size="50" /> -->
				<!-- 							<ice:inputText value="" /> -->
				<!-- 							<ice:commandButton value="Buscar" /> -->
				<!-- 						</ice:panelGroup> -->
				<ice:form>
					<ice:dataTable width="100%"
						value="#{clientForm.clients}" var="client">
						<ice:column>
		                    <ice:rowSelector value="#{client.selected}" toggleOnInput="false" immediate="true"
		                    	selectionListener="#{operationController.selectClient}" 
		                        preStyleOnSelection="true"/>
							<f:facet name="header">
								<ice:outputText value="Numero" />
							</f:facet>
							<ice:outputText value="#{client.id}" />
						</ice:column>
						<ice:column>
							<f:facet name="header">
								<ice:outputText value="Nombre" />
							</f:facet>
							<ice:outputText value="#{client.name}" />
						</ice:column>

						<ice:column>
							<f:facet name="header"></f:facet>
							<h:commandButton image="images/edit-page.png" alt="Edit"
								title="Edit" style="height: 11px; width: 11px;"
								action="#{operationController.editItem}">
								<f:setPropertyActionListener
									target="#{clientForm.toEdit}" value="#{client.id}" />
							</h:commandButton>
						</ice:column>
						<ice:column>
							<f:facet name="header"></f:facet>
							<h:commandButton image="images/popup-close.png" alt="Delete"
								title="Delete" style="height: 11px; width: 11px;"
								action="#{operationController.removeItem}">
								<f:setPropertyActionListener
									target="#{clientForm.toRemove}"
									value="#{client.id}" />
							</h:commandButton>
						</ice:column>
					</ice:dataTable>
				</ice:form>
			</ice:panelGroup>
		</ace:dialog>
		
		<ace:dialog header="Folio De Operación" widgetVar="operationFolioDialog"
			modal="true" draggable="false" resizable="false" showEffect="fade"
			hideEffect="fade" width="300">
			<ice:panelGroup>
				<ice:form>
					<ice:outputLabel value="Numero de Operacion:" />
					<ice:outputLabel value="#{operationForm.operation.id}" />
					<br />
					<ice:commandButton value="Ok" action="#{operationController.closeFolioDialog}" />
				</ice:form>
			</ice:panelGroup>
		</ace:dialog>
		
	   </ice:panelGroup>
	</ui:define>
</ui:composition>
